<template lang="">
  <div style="margin-bottom: 15px">
    <div>
      <span>{{ $t('xuan-1') }}</span>
      <a-range-picker 
        size="large" 
        @change="changeDateRange"
        valueFormat="YYYY-MM-DD HH:mm:ss"
      />
    </div>
  </div>
  <a-table 
    :columns="columns" 
    :row-key="record => record.id"
    :data-source="list" 
    :loading="loading"
    :pagination="pagination"
    bordered
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'status'">
        <a-tag color="blue">{{ getStausName(text) }}</a-tag>
      </template>
    </template>
  </a-table>
</template>
<script setup lang="ts">
import { ref, onBeforeMount } from 'vue';
import type { Dayjs } from 'dayjs';
import { getDepositRecord } from '@/api/financial';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
type RangeValue = [Dayjs, Dayjs];
const columns = [
  
  {
    title: t('ding-0'),
    dataIndex: 'id',
    key: 'id',
    width: 80,
  },
  {
    title: t('geng'),
    dataIndex: 'updated_at',
    key: 'updated_at',
  },
  {
    title: t('cunK-0'),
    dataIndex: 'amount',
    key: 'amount',
    ellipsis: true,
  },
  {
    title: t('zhuan-2'),
    dataIndex: 'status', // 1:待审核（已提交状态），2：审核通过，3：审核拒绝;default:1
    key: 'status',
  },
];
const list = ref<any []>([]);
const startDate = ref<string>();
const endDate = ref<string>();

const loading = ref<boolean>(false);
const currentPage = ref<number>(1);
const pageSize = ref<number>(10);
const dataTotal = ref<number>(0);
const pagination = computed(() => ({
  total: dataTotal.value,
  current: currentPage.value,
  pageSize: pageSize.value,
}));
function changeDateRange(dates: any) {
  if (dates) {
    startDate.value = dates[0];
    endDate.value = dates[1];

    fetchList({
      pageSize: pageSize.value,
      current: currentPage.value,
      start: startDate.value,
      end: endDate.value
    });
  }else {
    fetchList({
      pageSize: pageSize.value,
      current: currentPage.value,
    });
  }
}

function getStausName(status: string) {
  const statusMaps: any = {
    1: t('daiS'),
    2: t('shen-0'),
    3: t('shen-1')
  };

  return statusMaps[status] || '';
}

const fetchList = (params?: any) => {
  loading.value = true;
  getDepositRecord(params)
  .then((res: any) => {
    const { list: data, pagination_result } = res;
    if (Array.isArray(data)) {
      list.value = data;
    } else {
      list.value = [];
    }

    if (pagination_result) {
      dataTotal.value = pagination_result.total;
      currentPage.value = pagination_result.current;
      pageSize.value = pagination_result.pageSize;
    }
  })
  .catch((err: any) => {
    console.log(err)
  })
  .finally(() => {
    loading.value = false;
  })
}

const handleTableChange = (
  page: { pageSize: number; current: number },
  filters: any,
  sorter: any,
) => {
  fetchList({
    pageSize: page.pageSize,
    current: page.current,
    start: startDate.value,
    end: endDate.value
  });
};

onBeforeMount(() => {
  fetchList();
})
</script>
<style lang="">
  
</style>